<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/Public/js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#progress-bar {
    width: 200px;
    height: 30px;
    border: 0px solid #ff0000
}
#progress {
    height: 100%;
    background-color: green;
    width: 0px
}
</style>
</head>
<body>
<div id="progress-bar">
    <div id="progress">
    </div>
</div>
<script type="text/javascript">
                    var progress = 0;
                    var total = 0;
                    //var end = parseInt($("#progress-bar").width());
                    var end = 100;
                    var timer = null;
                    function run() {
                        $.post("{:U('test')}", function(data) {
                            //获取要处理的步骤总数
                            total = parseInt(data);
                            //计算平均一步需要前进多少
                            go = end / total;
                            timer = setInterval("my_progress()", 100);
                        });
                    }
                    function my_progress() {
                        $.post("{:U('ajax')}", function(data) {
                            if (data == 'success') {
                                progress += go;
                                if (progress <= end) {
                                    $("#progress").width(progress);
                                } else {
                                    window.clearInterval(timer);
                                    alert("采集完成！");
                                }
                            }
                        });
                    }
                    run();
                </script>
</body>
</html>